<template lang="pug">
  .clearfix
    Modal(
      width="400"
      v-model="isShowBatchUploadImgModal"
      title="批量上传照片附件"
      class-name="vertical-center-modal"
    )
      Row
        Col.pl-10(span="24")
          Upload(
            ref="upload"
            :before-upload="handleBeforeUploadBatchUploadImg"
            :on-success="uploadSuccessBatchUploadImg"
            :action="actionUrl"
            :show-upload-list="false"
            :max-size="50 * 1024"
            accept=".zip, .rar"
            :on-exceeded-size="handleMaxSizeTifty"
            :headers="headers"
          )
            Button(type="info") 上传
        Col.pl-10(span="24")
          .text-gray-9.pt-10.pb-10
            p.pb-10 仅支持上传50M以内的zip/rar文件
            p 标准文件格式：每个员工照片放一个文件夹，每个文件夹以相应的员工身份证号码命名，选择多个文件夹压缩成zip/rar文件
        Col.pl-10.pt-10(span="24")
          Tag(v-if="file") {{file.name}}
        //- Col.pl-10.pt-10(span="24" v-if="errorData.isError")
        //-   Button(type="warning" :to="errorData.downLoadUrl" target="_blank") 下载错误文件

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmitBatchUploadImg" :loading="!isCanSubmit") 确定
</template>

<script>
import { Common } from '@/utils/common.js'
import Cookies from 'js-cookie'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro.replace('/api', '/')

export default {
  name: '',

  props: {
  },

  data () {
    return {
      headers: {
        'Authorization': 'Bearer ' + Cookies.get('clientToken')
      },
      isShowBatchUploadImgModal: false,
      companyId: '',
      companyName: '',
      file: null,
      // errorData: {
      //   errorId: '',
      //   isError: false,
      //   downLoadUrl: null
      // },
      isCanSubmit: true
    }
  },

  watch: {
  },

  computed: {
    actionUrl () {
      return this.companyId && this.companyName ? baseUrl + '/api/Employee/BatchPictureUpload?companyId=' + this.companyId : baseUrl + '/api/Employee/BatchPictureUpload'
    }
  },

  mounted () {
    // this.companyId = this.$route.query.companyId
    // this.companyName = this.$route.query.companyName
  },

  methods: {
    cancel () {
      this.isShowBatchUploadImgModal = false
      this.file = null
    },
    show (companyId, companyName) {
      this.companyId = companyId
      this.companyName = companyName
      this.isCanSubmit = true
      this.isShowBatchUploadImgModal = true
      this.file = null
    },

    // 批量导入-上传前文件
    handleBeforeUploadBatchUploadImg (file) {
      // this.errorData.isError = false
      this.file = file
      console.log('file: ', this.file)
      return false
    },

    // 上传成功
    uploadSuccessBatchUploadImg (res, row) {
      console.log('上传成功res: ', res)
      console.log('上传成功row: ', row)
      if (res.code === 200 && res.success) {
        this.isShowBatchUploadImgModal = false
        this.$Message.success(res.message)
        this.file = null
      } else {
        this.isCanSubmit = true
        this.isShowBatchUploadImgModal = true
        this.$Message.error({
          content: res.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 确定导入
    handleSubmitBatchUploadImg () {
      this.isCanSubmit = false
      if (this.file) {
        this.$refs.upload.post(this.file)
      } else {
        this.isCanSubmit = true
        this.$Message.warning('请选择文件！')
      }
    },

    handleMaxSizeTifty () {
      this.$emit('handleMaxSizeTifty')
    }
  }
}
</script>

<style lang="less" scope>
</style>
